<template>
	<div class="mainHight">
		<nav>

			<el-row :gutter="10">
				<el-col :lg="5">
					<div class="grid-content bg-purple">
						<h2>adminSystem V 1.0	<a href="javascripy:;"  @click="bolLeftBtn"><i class="el-icon-menu"></i></a></h2>

					</div>

				</el-col>
				<el-col :lg="7">

					<div class="grid-content bg-purple time">

						<el-col :lg="12">
							<div class="grid-content bg-purple">
								<ul class="one">

									<li><i class="el-icon-date"></i>{{years}}</li>
								</ul>
							</div>
						</el-col>
						<el-col :lg="12">
							<div class="grid-content bg-purple-light">
								<ul>

									<li><i class="el-icon-time"></i>{{nowTime}}</li>
								</ul>
							</div>
						</el-col>

					</div>

				</el-col>
				<el-col :lg="12">

					<div class="grid-content bg-purple bg-purple-light lr">

						<img src="../../static/img/tx.jpg" />
						<span>欢迎管理员</span>
						<a href="javascript:;" @click="logout">退出</a>

					</div>
				</el-col>
			</el-row>
		</nav>
		<div class="HomeLeftMenu">
			<el-menu router default-active="$route.path" class="el-menu-vertical-demo leftMenu" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
				<div v-for="item in navArray" :key="item.indexNum">
					<el-submenu  v-if="item.hasChild" :index="item.indexNum">
						<template slot="title">
							<i v-bind:class="item.hasIcon"></i>
							<span slot="title">{{item.titleName}}</span>
						</template>
						<el-menu-item-group>
							<el-menu-item v-for="items in item.childArray" :key="item.childUrl" :index="`${config.ui_base_path}${items.childUrl}`" >
								{{items.childTitleName}}
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-menu-item v-else :index="`${config.ui_base_path}${item.hasUrl}`">
						<img :src="item.hasIcon" class="icon-picture">
						<span slot="title">{{item.titleName}}</span>
					</el-menu-item>
				</div>

			</el-menu>
		</div>
		<div class="rightMenu" v-bind:class="{ rightMenu2: isCollapse }">
			<div class="jiao"></div>
			<router-view/>
		</div>

	</div>
</template>
<script type="text/javascript">
	import config from "@/config.json";
	import axios from "axios"
	export default {
		name: "home",
		data() {
			return {
				config: config,
				years: "",
				nowTime: "",
				isCollapse: false,
				isHas: true,
				navArray: [{
					// index索引唯一标识
					indexNum: "0",
					// 父级标签名称
					titleName: "管理",
					// 是否有子集标签
					hasChild: true,
					// 如果没有子集则拥有跳转url
					hasUrl: "home/usrList",
					// 父级标签图标
					hasIcon: "icon-user-tie",
					childArray: [{
							childTitleName: "用户列表",
							childUrl: "home/usrList",
						}, {
							childTitleName: "用户购买商品列表",
							childUrl: "home/usrBuyList",
						}]
						//有子集信息

				}, {
					// index索引唯一标识
					indexNum: "1",
					// 父级标签名称
					titleName: "商品",
					// 是否有子集标签
					hasChild: true,
					// 如果没有子集则拥有跳转url
					hasUrl: "home/shopList",
					// 父级标签图标
					hasIcon: "icon-newspaper",
					childArray: [{
							childTitleName: "商品列表",
							childUrl: "home/shopList",
						}, {
							childTitleName: "下架商品列表",
							childUrl: "home/shopDownList",
						}]
						//有子集信息

				}, {
					// index索引唯一标识
					indexNum: "2",
					// 父级标签名称
					titleName: "订单",
					// 是否有子集标签
					hasChild: true,
					// 如果没有子集则拥有跳转url
					hasUrl: "home/shopOrderList",
					// 父级标签图标
					hasIcon: "icon-profile",
					childArray: [{
							childTitleName: "用户订单列表",
							childUrl: "home/shopOrderList",
						}]
						//有子集信息

				}, {
					// index索引唯一标识
					indexNum: "3",
					// 父级标签名称
					titleName: "优惠券",
					// 是否有子集标签
					hasChild: true,
					// 如果没有子集则拥有跳转url
					hasUrl: "home/couponList",
					// 父级标签图标
					hasIcon: "icon-file-openoffice",
					childArray: [{
							childTitleName: "优惠券列表",
							childUrl: "home/couponList",
						}]
						//有子集信息

				}, {
					// index索引唯一标识
					indexNum: "4",
					// 父级标签名称
					titleName: "密保",
					// 是否有子集标签
					hasChild: true,
					// 如果没有子集则拥有跳转url
					hasUrl: "home/securityQuestionList",
					// 父级标签图标
					hasIcon: "icon-credit-card",
					childArray: [{
							childTitleName: "密保问题列表",
							childUrl: "home/securityQuestionList",
						}]
						//有子集信息

				}, {
					// index索引唯一标识
					indexNum: "5",
					// 父级标签名称
					titleName: "公告",
					// 是否有子集标签
					hasChild: true,
					// 如果没有子集则拥有跳转url
					hasUrl: "home/noticeList",
					// 父级标签图标
					hasIcon: "icon-file-text2",
					childArray: [{
							childTitleName: "公告列表",
							childUrl: "home/noticeList",
						}, {
							childTitleName: "公告回收列表",
							childUrl: "home/noticeRecoveryList",
						}]
						//有子集信息

				}, {
					// index索引唯一标识
					indexNum: "6",
					// 父级标签名称
					titleName: "足迹",
					// 是否有子集标签
					hasChild: true,
					// 如果没有子集则拥有跳转url
					hasUrl: "home/footList",
					// 父级标签图标
					hasIcon: "icon-accessibility",
					childArray: [{
							childTitleName: "用户足迹列表",
							childUrl: "home/footList",
						}]
						//有子集信息
				}, {
					// index索引唯一标识
					indexNum: "7",
					// 父级标签名称
					titleName: "反馈列表",
					// 是否有子集标签
					hasChild: true,
					// 如果没有子集则拥有跳转url
					hasUrl: "home/feedback",
					// 父级标签图标
					hasIcon: "icon-sun",
					childArray: [{
							childTitleName: "反馈列表",
							childUrl: "home/feedback",
						}]
						//有子集信息

				}]

			}
		},
		methods: {
			//时间格式显示
			getDate() {
				var date = new Date()
				var newDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
				return newDate;
			},
			zeroNum(num) {
				return num = num < 10 ? '0' + num : num;
			},
			getTotelNumber() {

				this.nowTime = this.timers();
			},
			timers() {
				var date = new Date();
				var newDate = date.getHours() + ":" + this.zeroNum(date.getMinutes()) + ":" + this.zeroNum(date.getSeconds())
				return newDate;
			},
			logout() {
				axios.get("logout").then((res) => {
					if(res.success) {

					}
				});
			},
			handleOpen(key, keyPath) {

			},
			handleClose(key, keyPath) {

			},
			bolLeftBtn() {
				if(this.isHas) {
					this.isCollapse = true;
					this.isHas = false;
				} else {
					this.isCollapse = false;
					this.isHas = true;
				}
			}

		},
		created() {

			this.years = this.getDate();
			this.nowTime = this.timers();

			setInterval(this.getTotelNumber, 20);

		}
	}
</script>
